<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 99 100"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#fff" d="M.719 14.266C.719 6.387 7.104 0 14.98 0h69.76C92.615 0 99 6.387 99 14.266V100H.72V14.266Z"/><path fill="#99C2FF" d="M36.166 71.053H16.378c-2.135 0-3.865 1.767-3.865 3.947s1.73 3.948 3.865 3.948h19.788c2.135 0 3.866-1.768 3.866-3.948 0-2.18-1.731-3.947-3.866-3.947Z"/><path fill="#fff" d="M76.329 51.315h-9.695c-2.389 0-4.325 1.768-4.325 3.948 0 2.18 1.936 3.947 4.325 3.947h9.695c2.389 0 4.326-1.767 4.326-3.947s-1.937-3.948-4.326-3.948Z"/><path fill="#99C2FF" d="M76.225 32.895H18.252c-2.446 0-4.429 2.061-4.429 4.605 0 2.543 1.983 4.605 4.43 4.605h57.972c2.447 0 4.43-2.062 4.43-4.605 0-2.544-1.983-4.605-4.43-4.605Z"/><path fill="#1A446C" d="M54.178 51.315H19.184c-2.96 0-5.36 2.062-5.36 4.606 0 2.543 2.4 4.605 5.36 4.605h34.994c2.96 0 5.36-2.062 5.36-4.605 0-2.544-2.4-4.606-5.36-4.606Z"/><path fill="#fff" d="M33.638 53.52v.445h-1.35v1.055h1.2v.44h-1.2v1.095h1.35V57h-1.92v-3.48h1.92Zm1.272.725v.435c.183-.32.477-.48.88-.48.213 0 .403.05.57.15.166.1.293.245.38.435.096-.183.23-.327.4-.43.173-.103.368-.155.585-.155.316 0 .576.103.78.31.203.203.305.492.305.865V57h-.57v-1.54c0-.247-.062-.435-.185-.565-.123-.133-.292-.2-.505-.2-.213 0-.382.067-.505.2-.123.13-.185.318-.185.565V57h-.565v-1.54c0-.247-.062-.435-.185-.565-.123-.133-.292-.2-.505-.2a.67.67 0 0 0-.51.2c-.123.13-.185.318-.185.565V57h-.57v-2.755h.57Zm6.44 2.055c.167-.17.25-.397.25-.68 0-.283-.083-.508-.25-.675a.79.79 0 0 0-.585-.25.815.815 0 0 0-.59.245c-.163.163-.245.387-.245.67 0 .283.082.512.245.685a.8.8 0 0 0 .59.255.79.79 0 0 0 .585-.25Zm-.705.745c-.367 0-.675-.133-.925-.4-.25-.27-.375-.613-.375-1.03 0-.42.123-.76.37-1.02.25-.263.56-.395.93-.395.217 0 .407.05.57.15.167.097.295.225.385.385v-.49h.575V57H41.6v-.515a1.11 1.11 0 0 1-.385.41c-.163.1-.353.15-.57.15Zm2.929-3.53c0 .103-.035.19-.105.26a.353.353 0 0 1-.26.105.347.347 0 0 1-.255-.105.353.353 0 0 1-.105-.26c0-.103.035-.19.105-.26a.347.347 0 0 1 .255-.105c.103 0 .19.035.26.105.07.07.105.157.105.26ZM42.924 57v-2.755h.57V57h-.57Zm1.318 0v-3.7h.57V57h-.57Z"/><path fill="#1A446C" d="M59.631 17.105H19.908c-3.36 0-6.085 2.062-6.085 4.606 0 2.543 2.724 4.605 6.085 4.605H59.63c3.36 0 6.085-2.062 6.085-4.605 0-2.544-2.724-4.605-6.085-4.605Z"/><path fill="#fff" d="M35.509 19.31h.57v3.48h-.57l-1.715-2.595v2.595h-.57v-3.48h.57l1.715 2.59v-2.59Zm3.133 2.78c.167-.17.25-.397.25-.68 0-.283-.083-.508-.25-.675a.79.79 0 0 0-.585-.25.815.815 0 0 0-.59.245c-.163.163-.245.387-.245.67 0 .283.082.512.245.685a.8.8 0 0 0 .59.255.79.79 0 0 0 .585-.25Zm-.705.745c-.366 0-.675-.133-.925-.4-.25-.27-.375-.613-.375-1.03 0-.42.123-.76.37-1.02.25-.263.56-.395.93-.395.217 0 .407.05.57.15.167.097.295.225.385.385v-.49h.575v2.755h-.575v-.515c-.093.17-.222.307-.385.41-.163.1-.353.15-.57.15Zm2.849-2.8v.435c.183-.32.477-.48.88-.48.213 0 .403.05.57.15.167.1.293.245.38.435.096-.183.23-.327.4-.43.173-.103.368-.155.585-.155.316 0 .577.103.78.31.203.203.305.492.305.865v1.625h-.57v-1.54c0-.247-.062-.435-.185-.565-.123-.133-.292-.2-.505-.2-.214 0-.382.067-.505.2-.123.13-.185.318-.185.565v1.54h-.565v-1.54c0-.247-.062-.435-.185-.565-.123-.133-.292-.2-.505-.2a.67.67 0 0 0-.51.2c-.123.13-.185.318-.185.565v1.54h-.57v-2.755h.57Zm5.785 2.8c-.4 0-.725-.13-.975-.39s-.375-.605-.375-1.035c0-.43.127-.773.38-1.03.254-.26.58-.39.98-.39.403 0 .73.125.98.375.25.247.375.57.375.97 0 .097-.007.187-.02.27h-2.11c.014.23.09.413.23.55.143.133.322.2.535.2.31 0 .529-.128.655-.385h.615a1.249 1.249 0 0 1-.455.625c-.22.16-.492.24-.815.24Zm.77-1.62a.709.709 0 0 0-.225-.54.756.756 0 0 0-.535-.205.739.739 0 0 0-.53.205.815.815 0 0 0-.24.54h1.53Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group3467111E5f92joj extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
